/* eslint-disable no-undef */
// @ts-ignore
const app = getApp();
// @ts-ignore
Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    selected: 0, // 激活的tab
    // tabber列表，与app.json一致
    color: '#666666',
    // 注: list中的pagePath需要加'/'开头，否则在switchTab跳转url时会自带/src/pages开头导致路径错误
    list: [],
    tabbarHeight: 0,
  },
  observers: {
    '**': function () {
      const { clientType } = app.globalData;
      console.log('%c 🦉: clientType ', 'font-size:16px;background-color:#9e9692;color:white;', clientType);
      // 每次 setData 都触发
      console.log('done');
    },
  },

  lifetimes: {
    attached() {
      const { clientType, tabbarConfig } = app.globalData;
      this.setData({
        list: tabbarConfig[clientType],
      });
      // 获取tab栏高度
      // @ts-ignore
      const query = wx.createSelectorQuery().in(this);
      query
        .select('#tabbar')
        .boundingClientRect((res) => {
          this.setData({
            tabbarHeight: res.height,
          });
          // 将tab栏高度设置进全局数据
          app.globalData.tabbarHeight = res.height;
        })
        .exec();

      /**
       * 将初始化tabbar栏方法存入全局
       * @param {*} that 传入当前tab页面的this实例
       * @param {*} index 传入当前tab页面的索引
       * 若无该方法，会导致点击tab时激活的tab顺序错乱!
       * 例如在home首页onShow的生命周期钩子中，getApp().globalData.initTabbar(this, 0)
       */
      app.globalData.initTabbar = ([page], index) => {
        if (typeof page.getTabBar === 'function' && page.getTabBar()) {
          page.getTabBar().setData({
            selected: index,
          });
        }
      };
      /**
       * 动态修改底部菜单客户端
       */
      app.globalData.setTabbarList = () => {
        const { clientType, tabbarConfig } = app.globalData;
        this.setData({
          list: tabbarConfig[clientType],
        });
      };
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      // bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
      const { index, url } = e.currentTarget.dataset;
      if (this.data.selected !== index) {
        this.setData({
          selected: index,
        });
        // @ts-ignore
        wx.switchTab({
          url,
        });
      }
    },
  },
});
